React: TypeError: Невозможно прочитать свойство 'Item' из неопределенного

Question

Я хочу получить доступ к значению состояния / свойства в новом состоянии проп.На самом деле у меня уже есть свойство состояния, в котором я храню значение Item = 5, и я создаю UrlParam, где я храню URL, но мне нужно числовое значение Item в свойстве URL.Я новичок в React. Кто-нибудь, пожалуйста, помогите мне, как это сделать?

Когда я получаю сообщение об ошибке TypeError: Cannot read property 'Item' of undefined, может кто-нибудь помочь мне?

Код

 this.state={
  Item : 5,
  skip:0,
  urlParams:`http://localhost:8001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
}

Answer 1

Как уже упоминалось в другом ответе, похоже, что вы пытаетесь использовать this.state.Item до того, как выражение присваивания this.state={...} завершено.

Тем не менее, похоже, что вы хотите urlParams всегдаБудьте в курсе новых значений Item и skip.Если это так, вы можете реализовать ее как вспомогательную функцию вместо свойства state.

class Example extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      Item: 5,
      skip: 0
    }
    
    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:8001/parties?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }
  
  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      
        Example link
        {this.urlParams()}

Изменить ссылку )}} ReactDOM.render (, document.querySelector ('div # my-example'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="my-example"></div>

Answer 2

Когда значение для urlParams интерполировано this.state еще не определено.

Либо определите Item и skip как отдельные переменные, либо установите this.state.urlParams впоследствии:

const Item = 5;
const skip = 0;
 this.state={
  Item,
  skip,
  urlParams:`http://localhost:8001/parties?filter[limit]=${(Item)}&&filter[skip]=${skip}`
}

или

 this.state={
  Item : 5,
  skip:0
};
  this.state.urlParams = `http://localhost:8001/parties?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`;